<template>
  <data-table-app-page>
    <el-form slot="toolbar" inline :model="searchForm">
      <el-form-item label="名称">
        <el-input v-model="searchForm.orgName" style="width: 300px" />
      </el-form-item>
      <el-form-item>
        <data-table-query-button :query-params="searchForm" />
      </el-form-item>
    </el-form>
    <data-table
      ref="table"
      :url="`/api/serviceResource/listServiceResource?serviceType=${$params.type}`"
    >
      <el-table-column prop="area" label="区域" width="80" show-overflow-tooltip></el-table-column>
      <el-table-column prop="street" label="街道" width="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="orgName" label="名称" width="480" show-overflow-tooltip></el-table-column>
      <el-table-column v-if="$params.type == 'multi_service'" prop="contactName" label="联系人" width="100" show-overflow-tooltip></el-table-column>
      <el-table-column v-if="$params.type == 'multi_service'" label="手机号/固号" width="200" :formatter="formatters.contact"></el-table-column>
      <el-table-column v-if="$params.type == 'multi_service'" prop="remark" label="备注" width="300" show-overflow-tooltip></el-table-column>
    </data-table>
  </data-table-app-page>
</template>

<script>

export default {
  data() {
    return {
      searchForm: {},
      formatters: {
        contact(row) {
          if (row.contactTel && row.contactFixPhone) {
            return row.contactTel + '/' + row.contactFixPhone;
          } else {
            return row.contactTel || row.contactFixPhone;
          }
        }
      }
    };
  }
}
</script>